<template>
  <div class="container">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">商品分类</span>
      </x-header>
      <div class="main-headerAndTab">
        <ul class="classify-banner">
          <li :class={activeli:flag1}><div @click="handle1" class="title" :class={activetitle:flag1}>全部品牌</div></li>
          <li :class={activeli:flag2}><div @click="handle2" class="title" :class={activetitle:flag2}>大陆品牌</div></li>
          <li :class={activeli:flag3}><div @click="handle3" class="title" :class={activetitle:flag3}>港澳台品牌</div></li>
          <li :class={activeli:flag4}><div @click="handle4" class="title" :class={activetitle:flag4}>国外品牌</div></li>
          <li :class={activeli:flag5}><div @click="handle5" class="title" :class={activetitle:flag5}>历史品牌</div></li>
        </ul>
        <div class="brand-choose">
          <div class="brand-choose-one">
            <div class="content">
              <div id="showCityContent"></div>
              <div v-for="(item,index) in brandList" :key="index" class="letter-item">
                <div class="top2"><a id="item.letter">{{item.letter}}</a></div>
                <div class="itemcontent" v-for="i in item.citylist">{{i}}</div>
              </div>
            </div>
            <aside class="letter-aside">
              <ul>
                <li style="margin-bottom: 0.42rem;text-align: center;color: #4A4A4A" v-for="item in brandList" @click="naver(item.letter)">{{item.letter}}</li>
              </ul>
            </aside>
            <div id="tip">
              {{tipString}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getGoodsBrandList} from '@/api/good'
  import pinyin from 'pinyin'
    export default {
        name: "goodsbrand",
      methods:{
        back(){
          this.$router.go(-1)
        },
        handle1(){
          this.flag1=true;
          this.flag2=false;
          this.flag3=false;
          this.flag4=false;
          this.flag5=false;
        },
        handle2(){
          this.flag1=false;
          this.flag2=true;
          this.flag3=false;
          this.flag4=false;
          this.flag5=false;
        },
        handle3(){
          this.flag1=false;
          this.flag2=false;
          this.flag3=true;
          this.flag4=false;
          this.flag5=false;
        },
        handle4(){
          this.flag1=false;
          this.flag2=false;
          this.flag3=false;
          this.flag4=true;
          this.flag5=false;
        },
        handle5(){
          this.flag1=false;
          this.flag2=false;
          this.flag3=false;
          this.flag4=false;
          this.flag5=true;
        },
        getGoodsBrandList(){
          getGoodsBrandList({
            goodsType: this.goodsType,
            brandType: this.brandType,
          }).then(res =>{
            this.brandList=res;
          })
        },
        getPinYin(){
        },
      },
      data(){
          return{
            flag1:true,
            flag2:false,
            flag3:false,
            flag4:false,
            flag5:false,
            goodsType:1,
            brandType:'',
            brandList:[],
          }
      },
      created(){
          this.getGoodsBrandList();
          this.getPinYin();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .container{
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    position: relative;
  }
  .classify-banner{
    position: fixed;
    width: 13.42rem;
    height: 100%;
    background: #F5F5F5;
  }
  .classify-banner li{
    height: 2.85rem;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
  }
  .title{
    height: 1.42rem;
    line-height: 1.42rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
    text-align: center;
    padding-left: 1.07rem;
  }
  .activeli{
    background-color: white!important;
  }
  .activetitle{
    font-size: 14px;
    color: #AD2532;
    letter-spacing: -0.41px;
    text-align: justify;
    border-left: #AD2532 solid 2px;
  }
  .content{
    background-color: white;
  }

  .letter-item > div:first-child {
    font-size: 16px;
    line-height: 2em;
    background: #eee;
    margin-bottom: 2px;
  }

  .letter-item > div {
    margin: 1.07rem 1.07rem 1.07rem 1.07rem;
    height: 1.42rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
    text-align: left;
  }
  .letter-aside {
    position: fixed;
    right: 0;
    top: 0;
    padding-top: 3.57rem;
    background: #F5F5F5;
    height: 100%;
  }
  .letter-aside ul {
    list-style: none;
    line-height: 1.4em;
    font-size: 14px;
    color: #aaa;
  }

  #tip {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #333333;
    width: 100px;
    height: 100px;
    z-index: 10;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    opacity: 0;
  }
  .tipAppear {
    animation: appearTip 1 linear 0.5s;
  }

  @keyframes appearTip {
    0% {
      opacity: 1;
    }
    80% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
  .search-city {
    text-align: center;
    padding: 5px 0;
  }
  .search-city  input {
    line-height: 24px;
    border-radius: 5px;
    outline: none;
  }
  .tipShow {
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    color: #bbbbbb;
  }
  .top2{
    width: 11.07rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    margin-left:1.07rem;
  }
  .top2 a{
    font-size: 14px;
    color: #4A4A4A;
    font-weight: bolder;
    letter-spacing: -0.53px;
    text-align: center;
    margin-left: 1.07rem;
  }
  .itemcontent{
    margin-left: 1.78rem!important;
  }
  .brand-choose{
    position: absolute;
    background-color: white;
    width: 13.35rem;
    height: 100%;
    margin-left: 13.42rem;
  }
  .brand-choose-one{
    width: 100%;
    height: 100%;
  }
</style>
